Størrelsesstyring av spor i CSS Grid: Mestre 'Intrinsic' og 'Extrinsic' kontroll

CSS Grid Layout er et kraftig verktøy for å lage komplekse og responsive weblayouter. En av dets viktigste styrker ligger i de fleksible mulighetene for å styre størrelsen på spor, noe som lar deg kontrollere størrelsen på rader og kolonner med presisjon. Å forstå de ulike nøkkelordene og funksjonene for sporstørrelse er avgjørende for å bygge tilpasningsdyktige og vedlikeholdbare layouter. Denne artikkelen dykker ned i de avanserte konseptene 'intrinsic' og 'extrinsic' størrelsesstyring i CSS Grid, og utforsker hvordan de gjør det mulig å lage layouter som tilpasser seg elegant til varierende innhold og skjermstørrelser.

Forstå Grid-spor og størrelsesstyring

Før vi dykker ned i detaljene rundt 'intrinsic' og 'extrinsic' størrelsesstyring, la oss repetere de grunnleggende konseptene for CSS Grid-spor.

Hva er Grid-spor?

Grid-spor er radene og kolonnene i en grid-layout. De definerer strukturen som grid-elementene plasseres i. Størrelsen på disse sporene påvirker direkte den overordnede layouten og hvordan innholdet fordeles i rutenettet.

Spesifisere sporstørrelser

Du kan definere sporstørrelser ved hjelp av egenskapene grid-template-rows og grid-template-columns. Disse egenskapene aksepterer en liste med verdier separert av mellomrom, der hver verdi representerer størrelsen på et tilsvarende spor. For eksempel:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

Denne koden lager et rutenett med tre kolonner og to rader. Første og tredje kolonne tar opp 1 brøkdel (fr) av den tilgjengelige plassen hver, mens den andre kolonnen tar opp 2 brøkdeler. Radene får automatisk størrelse basert på innholdet sitt.

'Intrinsic' vs. 'Extrinsic' størrelsesstyring

Kjernen i avansert størrelsesstyring av grid-spor ligger i å forstå skillet mellom 'intrinsic' og 'extrinsic' størrelsesstyring. Disse konseptene bestemmer hvordan størrelsen på et spor avgjøres, basert på innholdet og den tilgjengelige plassen.

'Intrinsic' størrelsesstyring: Innholdsdrevet

'Intrinsic' størrelsesstyring betyr at størrelsen på et grid-spor bestemmes av innholdet i grid-elementene som er plassert i det sporet. Sporet vil utvide eller trekke seg sammen for å romme innholdet, opp til visse grenser. Nøkkelord for 'intrinsic' størrelsesstyring inkluderer:

• auto: Standardverdien. Sporstørrelsen bestemmes av det største minimumsstørrelsesbidraget fra grid-elementene i sporet. I de fleste tilfeller betyr dette i praksis at sporet blir stort nok til å passe alt innhold uten 'overflow', men det kan påvirkes av min-width/min-height-verdier satt på grid-elementer.
• min-content: Sporet dimensjoneres for å passe den minste mengden plass innholdet trenger uten 'overflow'. For eksempel vil tekst brytes på det minste mulige punktet, selv om det bryter ord på en uheldig måte.
• max-content: Sporet dimensjoneres for å passe den største mengden plass innholdet trenger uten 'overflow'. For tekst betyr dette at den vil prøve å unngå linjeskift så mye som mulig, noe som potensielt kan resultere i veldig brede eller høye spor.
• fit-content(length): Sporet dimensjoneres til den minste av max-content og den angitte length. Dette lar deg sette en maksimal størrelse for sporet, samtidig som det kan krympe basert på innholdet.

Eksempel: 'Intrinsic' størrelsesstyring med min-content og max-content

Se for deg et scenario med to kolonner. Den første kolonnen er dimensjonert med min-content, og den andre med max-content. Hvis innholdet i den første kolonnen er et langt ord, vil det bli brutt på ethvert mulig punkt for å passe innenfor minimumsinnholdsstørrelsen. Den andre kolonnen vil derimot utvide seg for å romme innholdet uten linjeskift.

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Kort tekst</div>
</div>

            

              
                Copy
              
            
          

I dette eksempelet vil ordet "Supercalifragilisticexpialidocious" bli brutt over flere linjer i den første kolonnen, mens "Kort tekst" vil forbli på en enkelt linje i den andre kolonnen. Dette demonstrerer hvordan 'intrinsic' størrelsesstyring tilpasser seg innholdets iboende størrelseskrav.

Eksempel: 'Intrinsic' størrelsesstyring med fit-content()

Funksjonen `fit-content()` er nyttig når du vil at et spor skal være innholdsdimensjonert, men også ha en maksimal størrelsesgrense. Dette kan brukes for å hindre at kolonner eller rader blir for store, samtidig som de kan krympe hvis innholdet er mindre.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

I dette eksempelet vil den første kolonnen utvide seg for å passe innholdet, men vil ikke overstige 200px i bredden. Den andre kolonnen vil ta opp den gjenværende plassen. Dette er nyttig for å lage layouter der du vil at en kolonne skal være fleksibel, men ikke ta for mye plass.

'Extrinsic' størrelsesstyring: Plassdrevet

'Extrinsic' størrelsesstyring, på den annen side, betyr at størrelsen på et grid-spor bestemmes av faktorer utenfor innholdet, slik som den tilgjengelige plassen i grid-containeren eller en fast størrelsesverdi. Nøkkelord for 'extrinsic' størrelsesstyring inkluderer:

• length: En fast lengdeverdi (f.eks. 100px, 2em, 50vh). Sporet vil være nøyaktig denne størrelsen, uavhengig av innholdet.
• percentage: En prosentandel av grid-containerens størrelse (f.eks. 50%). Sporet vil ta opp denne prosentandelen av den tilgjengelige plassen.
• fr (brøkdelenhet): Representerer en brøkdel av den tilgjengelige plassen i grid-containeren etter at alle andre spor er dimensjonert. Dette er den mest fleksible måten å fordele plass mellom spor på.

Eksempel: 'Extrinsic' størrelsesstyring med fr-enheter

fr-enheten er uvurderlig for å lage responsive layouter som tilpasser seg ulike skjermstørrelser. Ved å tildele brøkdelsenheter til spor, sikrer du at de proporsjonalt deler den tilgjengelige plassen.

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

I dette eksempelet har grid-containeren to kolonner. Den første kolonnen tar opp 1 brøkdel av den tilgjengelige plassen, mens den andre kolonnen tar opp 2 brøkdeler. Hvis grid-containeren er 600px bred, vil den første kolonnen være 200px bred, og den andre vil være 400px bred (minus eventuell 'grid gap'). Dette sikrer at kolonnene alltid opprettholder sitt proporsjonale forhold, uavhengig av skjermstørrelsen.

Eksempel: 'Extrinsic' størrelsesstyring med prosenter og faste lengder

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

I dette eksempelet er den første kolonnen satt til en fast bredde på `200px`. Den andre kolonnen vil ta opp 50% av grid-containerens bredde. Til slutt bruker den tredje kolonnen `1fr`-enheten, så den vil ta opp den plassen som er igjen etter at de to første kolonnene er dimensjonert.

Kombinere 'Intrinsic' og 'Extrinsic' størrelsesstyring: minmax()

Funksjonen minmax() lar deg kombinere 'intrinsic' og 'extrinsic' størrelsesstyring, noe som gir enda større kontroll over sporstørrelser. Den definerer et område med akseptable størrelser for et spor, ved å spesifisere både en minimums- og en maksimumsverdi.

            minmax(min, max)
            

              
                Copy
              
            
          

• min: Minimumsstørrelsen på sporet. Dette kan være en hvilken som helst gyldig verdi for sporstørrelse, inkludert 'intrinsic' nøkkelord (auto, min-content, max-content) eller 'extrinsic' verdier (length, percentage, fr).
• max: Maksimumsstørrelsen på sporet. Dette kan også være en hvilken som helst gyldig verdi for sporstørrelse. Hvis `max` er mindre enn `min`, blir `max` ignorert, og `min` blir brukt.

Eksempel: Bruke minmax() for responsive kolonner

Et vanlig bruksområde for minmax() er å lage responsive kolonner som har en minimumsbredde, men som kan utvide seg for å fylle tilgjengelig plass.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

Her lager repeat(auto-fit, minmax(200px, 1fr)) så mange kolonner som mulig som er minst 200px brede, men som kan utvide seg for å fylle den gjenværende plassen. Nøkkelordet auto-fit sikrer at tomme kolonner kollapser, noe som skaper en fleksibel og responsiv layout.

Eksempel: Kombinere minmax() med 'intrinsic' størrelsesstyring

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

I dette eksempelet vil den første kolonnen være minst like bred som sin minimumsinnholdsstørrelse, men vil ikke overstige `300px`. Den andre kolonnen vil ta opp den gjenværende plassen.

Praktiske anvendelser og beste praksis

Å forstå 'intrinsic' og 'extrinsic' størrelsesstyring er avgjørende for å lage robuste og tilpasningsdyktige layouter. Her er noen praktiske anvendelser og beste praksis å ha i bakhodet:

• Responsiv navigasjon: Bruk minmax() for å lage navigasjonselementer som har en minimumsbredde, men som kan utvide seg for å fylle den tilgjengelige plassen i navigasjonslinjen.
• Fleksible kortlayouter: Benytt repeat(auto-fit, minmax()) for å lage kortlayouter som automatisk justerer seg til forskjellige skjermstørrelser, og sikrer at kortene brytes elegant på mindre skjermer.
• Innholdsbevisste sidefelt: Bruk min-content eller max-content for å dimensjonere sidefelt basert på innholdet, slik at de kan utvide eller trekke seg sammen etter behov.
• Unngå faste bredder: Minimer bruken av faste bredder (px) til fordel for relative enheter (%, fr, em) for å lage layouter som tilpasser seg forskjellige skjermstørrelser og brukerpreferanser.
• Test grundig: Test alltid grid-layoutene dine på forskjellige enheter og skjermstørrelser for å sikre at de gjengis korrekt og gir en konsistent brukeropplevelse.

Avanserte teknikker for Grid-størrelsesstyring

Utover de grunnleggende nøkkelordene og funksjonene, tilbyr CSS Grid mer avanserte teknikker for å finjustere sporstørrelser.

Funksjonen repeat()

Funksjonen repeat() forenkler opprettelsen av flere spor med samme størrelse. Den tar to argumenter: antall repetisjoner og sporstørrelsen.

            repeat(number, track-size)
            

              
                Copy
              
            
          

For eksempel:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

Dette er ekvivalent med:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

Funksjonen repeat() kan også brukes med nøkkelordene auto-fit og auto-fill for å lage responsive grid-layouter som automatisk justerer seg til den tilgjengelige plassen.

Nøkkelordene auto-fit og auto-fill

Disse nøkkelordene brukes med repeat()-funksjonen for å lage responsive rutenett som tilpasser seg antall elementer i rutenettet og den tilgjengelige plassen. Hovedforskjellen mellom dem ligger i hvordan de håndterer tomme spor.

• auto-fit: Hvis alle sporene er tomme, vil sporene kollapse til 0 bredde.
• auto-fill: Hvis alle sporene er tomme, vil sporene beholde sin størrelse.

Eksempel: Bruke auto-fit for responsive kolonner

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

I dette eksempelet vil rutenettet lage så mange kolonner som mulig som er minst 200px brede, men som kan utvide seg for å fylle den gjenværende plassen. Hvis det ikke er nok elementer til å fylle alle kolonnene, vil de tomme kolonnene kollapse til 0 bredde.

Hensyn til internasjonalisering (i18n) og lokalisering (l10n)

Når du designer layouter for et globalt publikum, er det viktig å vurdere virkningen av forskjellige språk og skriveretninger. Tekstlengde kan variere betydelig mellom språk, noe som potensielt kan påvirke layouten hvis sporstørrelser ikke er riktig konfigurert. Her er noen tips for å designe internasjonaliserte layouter:

• Bruk relative enheter: Foretrekk relative enheter som em, rem og prosenter fremfor faste enheter som piksler for å la teksten skalere i henhold til brukerens skriftstørrelsespreferanser.
• 'Intrinsic' størrelsesstyring: Benytt 'intrinsic' nøkkelord for størrelsesstyring som min-content, max-content og fit-content() for å sikre at spor tilpasser seg innholdets størrelse, uavhengig av språk.
• Logiske egenskaper: Bruk logiske egenskaper som inline-start og inline-end i stedet for fysiske egenskaper som left og right for å støtte både venstre-til-høyre (LTR) og høyre-til-venstre (RTL) språk.
• Testing: Test layoutene dine med forskjellige språk og skriveretninger for å identifisere og løse eventuelle problemer. Simuler lengre strenger, som potensielt kan finnes i andre språk.

Konklusjon

Størrelsesstyring av spor i CSS Grid er et kraftig og allsidig verktøy for å lage responsive og tilpasningsdyktige weblayouter. Ved å mestre konseptene 'intrinsic' og 'extrinsic' størrelsesstyring, forstå minmax()-funksjonen og utnytte repeat()-funksjonen, kan du bygge layouter som elegant tilpasser seg varierende innhold og skjermstørrelser. Husk å vurdere virkningen av internasjonalisering og lokalisering når du designer for et globalt publikum.

Eksperimenter med forskjellige teknikker for sporstørrelse og utforsk de uendelige mulighetene med CSS Grid. Med øvelse og en solid forståelse av disse konseptene, vil du være godt rustet til å lage sofistikerte og brukervennlige weblayouter for ethvert prosjekt.